<template>
<div class="whisper">
  <div class="whisper-wrap">
    <div class="title" @click="writeShow">
      <span>写日记</span>
      <i class="iconfont" :class="{'icon-unfolded-s':iconActive,'icon-shrink-s':!iconActive}"></i>
    </div>
    <div class="whisper-add" v-show="writeBoke">
      <textarea placeholder="请尽情书写你的生活点滴" v-model="myBoke"></textarea>
      <div class="input-file">
        <input type="file" />
        <button class="file">选择图片</button>
        <button class="add" @click="submit">確定</button>
      </div>
    </div>
    <div class="whisper-list">
      <div class="item-box" v-for="(item,index) in itemBox">
        <div class="item">
          <i class="iconfont icon-shanchu1" @click="deleteBox(index)"></i>
          <i class="iconfont icon-riqi"></i>
          <span class="hour">12:25</span>
          <span class="date">2019/01/07</span>
          <p class="text-cont">
                    {{item.ct}}
          </p>
          <div class="img-box">
            <img src="/static/img/wy_img1.jpg" />
          </div>
          <div class="op-list">
            <p class="like" @click="likeToggle(index)" :class="{active:item.active}">
              <i class="iconfont icon-dianzan"></i>
              <span >{{item.like}}</span>
            </p>
            <p class="edit" >
              <i class="iconfont icon-message"></i>
              <span>{{item.leinfo}}</span>
            </p>
            <p class="off" @click="reviewToggle(index)">
              <span>{{item.toggleg}}</span>
              <i class="iconfont icon-xiangxia" :class="{trans:item.tranActive}"></i>
            </p>
          </div>
        </div>
        <div class="review-version" v-show="item.showlist">
                <div class="form">
                  <img src="/static/img/header2.png" />
                  <textarea name="desc" class="desc" v-model="item.desc"></textarea>
                  <p>
                    <button class="definite" @click="addChat(index)">
                      確定
                  </button>
                  </p>
                </div>
          <div class="list-cont">
              <div class="cont" v-for="(itemc,i) in item.listcont">
                <img src="/static/img/header2.png" />
                <div class="text">
                  <p class="tit">
                    <span class="name">张国锋</span>
                    <span class="data">2018/06/06</span>
                  </p>
                  <p class="ct">
                      {{itemc}}
                  </p>
                  <a @click="deleteChat(index,i)">删除评论</a>
                </div>
              </div>
          </div>
        </div>
      </div>
    </div>
    <pagination :page="page" :page-size="pageSize" :total="total" :max-page="maxPage" @pagehandler="pageHandler" />
  </div>
</div>
</template>
<script>
  import pagination from "./plugin/pagination"
    export default {
        name: "whisper",
      data(){
          return {
            page: 1,
            pageSize: 10,
            total: 150,
            maxPage:9,
            itemBox:[{ct:"果没有见识，切开牛油果费了好大劲，切成了这样。",showlist:false,toggleg:"展开",desc:"",listcont:[],like:0,leinfo:0,active:false,tranActive:false}],
            writeBoke:false,
            iconActive:true,
            myBoke:""
          }
      },
      mounted(){
            this.$http.get("http://hhh.com").then(({data})=>{
              console.log(data);
            })
      },
      methods:{
        reviewToggle(index){
          this.itemBox[index].showlist=!this.itemBox[index].showlist;
          this.itemBox[index].showlist?(()=>{this.itemBox[index].tranActive=true;this.itemBox[index].toggleg="收起"})():(()=>{ this.itemBox[index].tranActive=false;this.itemBox[index].toggleg="展开"})();
        },
        pageHandler: function (page) {
          this.page = page;
        },
        addChat(index){
             this.itemBox[index].desc.trim()?(()=>{this.itemBox[index].listcont.unshift(this.itemBox[index].desc);this.itemBox[index].leinfo++;this.itemBox[index].desc="";})():null;
        },
        deleteChat(index,i){
          this.itemBox[index].listcont.splice(i,1);
          this.itemBox[index].leinfo--;
        },
        likeToggle(index){
              this.itemBox[index].active=!this.itemBox[index].active;
              this.itemBox[index].active?this.itemBox[index].like++:this.itemBox[index].like--;
        },
        writeShow(){
          this.writeBoke=!this.writeBoke;
          this.writeBoke?this.iconActive=false:this.iconActive=true;
        },
        submit(){
          this.myBoke.trim()?(()=>{this.itemBox.unshift({ct:this.myBoke,showlist:false,toggleg:"展开",desc:"",listcont:[],like:0,leinfo:0,active:false,tranActive:false});this.myBoke="";})():null;
        },
        deleteBox(index){
          this.itemBox.splice(index,1);
        }
      },
      components:{
          pagination
      }
    }
</script>
<style lang="scss" scoped>
   @import "../assets/css/whisper";
</style>
